<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<link href="css/redmond/jquery-ui-1.10.3.custom.min.css" rel="stylesheet" type="text/css">	<!-- jquery UI CSS -->
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />			<!-- jqGrid CSS -->
<link href="css/selfTemplate.css" rel="stylesheet" type="text/css">							<!-- homemade CSS -->

<script src="js/jquery-2.1.0.min.js" type="text/javascript"></script>						<!-- jquery -->
<script src="js/grid.locale-tw.js" type="text/javascript"></script>							<!-- jqGrid locale -->
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>						<!-- jqGrid core -->
<script src="js/jquery-ui-1.10.3.custom.js" type="text/javascript"></script>				<!-- jquery UI -->
<script src="js/jquery.cookie.js" type="text/javascript"></script>							<!-- cookie -->
<script src="js/widgets.js" type="text/javascript"></script>								<!-- homemade js -->

<script type="text/javascript">

$(document).ready(function() {	

	var pageName = "env.html";
	init(pageName);
	querySubsys($.cookie("empId"), pageName, "subsysId",$.cookie("localSystemId") );
	/*	綁定 下拉吧 選擇的事件 */
	$("#a_form #fc").val("mappingEnvSquad");
	selectSubSys("QueryEnv");
	
	var subsysId = $("select#subsysId option:selected").val();
	$("#gd").jqGrid({
		url:'QueryEnv',
		datatype: "json",
		postData:{fc:$("#a_form #fc").val(),subsysId:subsysId},
		type: "post",
		colNames:["環境ID","環境名稱"],
	   	colModel:[{	/*	環境ID	*/
	   			name:"id",
	   			index:"id",
	   			editable:true,
	   			editrules:{ required:true }
	   		}, {	/*	環境名稱	*/
	   			name:"name",
	   			index:"name",
	   			editable:true,
	   			editrules:{ required:true }
	   		}
	   	],
	   	rowNum: 6,
	   	forceFit: true,
	   	pager: "#pager",
		rownumbers: true,
	   	viewrecords: true,	
		caption: "維護環境"
	}).jqGrid("navGrid","#pager",{add:true,edit:true,del:true,search:false,refresh:false},
		{	
			/* Edit
				按下送出後要完成下列功能
				1. 畫面更新為新輸入的資料
				2. 後端更改新值成功 
			*/
			url: "ManipulateGridEnv",
			mtype: "POST",
			/* afterShowForm : function(formid) {
				var sel_id = $("#gd").jqGrid('getGridParam', 'selrow');
				sel_id = $("#gd").jqGrid('getCell', sel_id, 'webConsole');
				$.post('QueryWCL',{fc:'2',bssId:$("table#parTable #bss option:selected").val(), subsysId: $("table#parTable #subsys option:selected").val() },function(reses) {
					$("select.FormElement option").remove();
					$.each( reses, function(i, res) {
						tmp = "";
						if ( res.strA == sel_id) { tmp="SELECTED"; }
						$("select.FormElement").append("<option id='"+res.intA+"' "+tmp+" >"+res.strA+"</option>");	
					});
				},"JSON");
			}, */
			
			editData:{
				subsysId: function() { return $("table#parTable #subsysId option:selected").val();/* $("table#parTable #subsys option:selected").val(); */ },
				empId: function() { return $.cookie("empId"); }
			}		
		},
		{	// Add
			url: "ManipulateGridEnv",
			mtype: "POST",
			/* afterShowForm : function(formid) {
				var sel_id = $("#gd").jqGrid('getGridParam', 'selrow');
				sel_id = $("#gd").jqGrid('getCell', sel_id, 'webConsole');
				$.post('QueryWCL',{fc:'2',bssId:$("table#parTable #bss option:selected").val(), subsysId: $("table#parTable #subsys option:selected").val() },function(reses) {
					$("select.FormElement option").remove();
					$.each( reses, function(i, res) {
						tmp = "";
						if ( res.strA == sel_id) { tmp="SELECTED"; }
						$("select.FormElement").append("<option id='"+res.intA+"' "+tmp+" >"+res.strA+"</option>");	
					});
				},"JSON");
			}, */
			editData: {
				//bssId: function() { return $("table#parTable #bss option:selected").val();},
				subsysId: function() { return $("table#parTable #subsysId option:selected").val(); },
				empId: function() { return $.cookie("empId"); }
			}
		},
		{	// Delete
			url: "ManipulateGridEnv",
			mtype: "POST",
			delData: { 
				//bssId: function() { return $("table#parTable #bss option:selected").val();},
				envId: function() {
					var sel_id = $("#gd").jqGrid('getGridParam', 'selrow');
					return $("#gd").jqGrid('getCell', sel_id, 'envId');
				},
				subsysId: function() { return $("table#parTable #subsysId option:selected").val();  },
				empId: function() { return $.cookie("empId"); }
			}
	});
});
</script>

</head>
<body>
	<div id="header"></div>
	<p>
	<img src="pic/env.png" > 
	<p><p>
	<table id="parTable">
		<thead class="tableFirst">
			<tr><th class="right zhTwN">系統：</th><td><select id="subsysId"></select></td></tr>
		</thead>
	</table>
	<p>  
	<table id="gd"></table>
	<div id="pager"></div>
</body>
<form id="a_form"><input type="hidden" id="fc"></form>
</html>